<template>
<view class="person">
	<view class="top-box">
		<image :src="userInfo.info.icon || '/static/logo.png'" style="width: 116upx; height: 116upx; margin-left: 30upx; display: block; border-radius: 100%; flex-shrink: 0;"></image>
		
		<view style="height: 116upx; margin-left: 35upx;" v-if="userInfo.info.phone">
			<view v-if="userInfo.info.nick" style="font-size: 36upx; font-weight: 600; line-height: 60upx; color: #58585a;">Hi,{{userInfo.info.nick}}</view>		
			<view style="font-size: 28upx; line-height: 2; color: #f27b3d;">{{ userInfo.info.phone }}</view>
		</view>
		<view style="height: 116upx; margin-left: 35upx;" v-else>
			<button lang="zh_CN" open-type="getAuthorize" @getAuthorize="authPhone" style="font-size: 60upx; font-weight: 600; line-height: 116upx; 
				color: #58585a; background: none; border: none;" scope='phoneNumber' class="phoneBtn">请绑定手机号</button>		
					<!-- 请绑定手机号 -->
		</view>
		
	</view>
	<view class="person_bottom">
		
		<view class="person_item" @click="turnTo('order')">
			<view class="person_item_left">
				<image src="/static/1.png" style="width: 34upx; height: 40upx;"></image>
			</view>
			<view style="color: #58585a; font-size: 30upx; font-weight: 600; width: 470upx; height: 40upx; line-height: 40upx;">我的订单</view>
			<view class="person_item_right">
				<image src="/static/right.png" style="height: 28upx; width: 13upx;"></image>
			</view>
		</view>
		
		<view class="person_item" @click="turnTo('wallet')">
			<view class="person_item_left">
				<image src="/static/2.png" style="width: 37upx; height: 34upx;"></image>
			</view>
			<view style="color: #58585a; font-size: 30upx; font-weight: 600; width: 470upx; height: 40upx; line-height: 40upx;">我的钱包</view>
			<view class="person_item_right">
				<image src="/static/right.png" style="height: 28upx; width: 13upx;"></image>
			</view>
		</view>
		
		<view class="person_item" @click="turnTo('about')">
			<view class="person_item_left">
				<image src="/static/3.png" style="width: 34upx; height: 40upx;"></image>
			</view>
			<view style="color: #58585a; font-size: 30upx; font-weight: 600; width: 470upx; height: 40upx; line-height: 40upx;">关于我们</view>
			<view class="person_item_right">
				<image src="/static/right.png" style="height: 28upx; width: 13upx;"></image>
			</view>
		</view>
		
		<view class="person_item" @click="turnTo('help')">
			<view class="person_item_left">
				<image src="/static/4.png" style="width: 34upx; height: 40upx;"></image>
			</view>
			<view style="color: #58585a; font-size: 30upx; font-weight: 600; width: 470upx; height: 40upx; line-height: 40upx;">使用帮助</view>
			<view class="person_item_right">
				<image src="/static/right.png" style="height: 28upx; width: 13upx;"></image>
			</view>
		</view>
		
		<view class="person_item" @click="turnTo('fankui')">
			<view class="person_item_left">
				<image src="/static/5.png" style="width: 40upx; height: 37upx;"></image>
			</view>
			<view style="color: #58585a; font-size: 30upx; font-weight: 600; width: 470upx; height: 40upx; line-height: 40upx;">意见反馈</view>
			<view class="person_item_right">
				<image src="/static/right.png" style="height: 28upx; width: 13upx;"></image>
			</view>
		</view>
		
		<view class="person_item" @click="turnTo('jiameng')">
			<view class="person_item_left">
				<image src="/static/6.png" style="width: 42upx; height: 35upx;"></image>
			</view>
			<view style="color: #58585a; font-size: 30upx; font-weight: 600; width: 470upx; height: 40upx; line-height: 40upx;">合作加盟</view>
			<view class="person_item_right">
				<image src="/static/right.png" style="height: 28upx; width: 13upx;"></image>
			</view>
		</view>
		
	</view>
</view>
</template>

<script>
import { HTTP } from '../../http.js'
let http = new HTTP;
	export default {
		data() {
			return {
				personImg: '../../static/user.png',
				userInfo: {
					info: {},
					getInfo: ()=>{						
						let user = uni.getStorageSync('user');
						if(user.nick) user.nick=`${user.nick}(${user.userId})`;
						else user.nick=user.userId;
						this.userInfo.info=user;
					}
				}
			}
		},
		onLoad() {
			this.userInfo.getInfo();
		},
		methods: {
			authPhone() {
				my.getPhoneNumber({
					success: (res) => {
						let encryptedData = res.response;
						http.request({
							url: `login/decodeZfbPhone?json=${ encodeURIComponent( encryptedData ) }`,
							method: 'get',
							success: (res) => {
								console.log( res, 'res' );
								let json = JSON.parse( res.dataList );
								let user = uni.getStorageSync('user');
								user.phone = json.mobile;
								this.userInfo.info.phone = json.mobile;
								uni.setStorage({ key: 'user', data: user });
							}
						});	
					}
				});
			},
			turnTo(name) {
				uni.navigateTo({ url: '/pages/index/' + name });
			},
			goBack() {
				uni.navigateBack({ delta: 1 });			
			}
		}
	}
</script>

<style>
.person {
	height: 100vh;
	width: 100vw;
	overflow: auto;
	position: relative;
	background: #F7F7F7;
}

.person .phoneBtn::after {
	border: none;
}

.person .top-box {
	width: 100%;
	height: 310upx;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.person_bottom {
	width: 100%;
	height: calc( 100% - 310upx );
	background: #FFF;
	border-radius: 30upx 30upx 0upx 0upx;
	padding-top: 30upx;
	box-sizing: border-box;
}

.person_item {
	width: 100%;
	height: 80upx;
	margin: 10upx 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.person_item_left {
	width: 42upx;
	height: 40upx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 50upx;
}

.person_item_right {
	width: 42upx;
	height: 40upx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 50upx;
}
</style>
